<!DOCTYPE html><html lang="[&quot;zh-Hans&quot;,&quot;zh-CN&quot;,&quot;default&quot;]"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="手写react优惠券组件"><meta name="keywords" content="react,component"><meta name="author" content="wenmu"><meta name="copyright" content="wenmu"><title>手写react优惠券组件 | 温木的博客</title><link rel="shortcut icon" href="/melody-favicon.ico"><link rel="stylesheet" href="/css/index.css?version=1.6.1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.6.1"><link rel="dns-prefetch" href="https://cdn.staticfile.org"><link rel="dns-prefetch" href="https://cdn.bootcss.com"><link rel="dns-prefetch" href="https://creativecommons.org"><link rel="dns-prefetch" href="http://ta.qq.com"><script>(function() {
   var hm = document.createElement("script");
   hm.src = "https://tajs.qq.com/stats?sId=&lt;script type=&quot;text/javascript&quot; src=&quot;http://tajs.qq.com/stats?sId=66523541&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(hm, s);
 })();</script><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  }
} </script><meta name="generator" content="Hexo 4.2.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#先看效果图"><span class="toc-number">1.</span> <span class="toc-text">先看效果图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#实现分析"><span class="toc-number">2.</span> <span class="toc-text">实现分析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#实现锯齿效果"><span class="toc-number">3.</span> <span class="toc-text">实现锯齿效果</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#方法一：伪元素-before-和-after"><span class="toc-number">3.1.</span> <span class="toc-text">方法一：伪元素 before 和 after</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#讲解"><span class="toc-number">3.2.</span> <span class="toc-text">讲解</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用-radial-gradient-画圆点背景"><span class="toc-number">3.3.</span> <span class="toc-text">使用 radial-gradient 画圆点背景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#上边凹槽的实现"><span class="toc-number">4.</span> <span class="toc-text">上边凹槽的实现</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#code"><span class="toc-number">4.1.</span> <span class="toc-text">code</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#React-Code"><span class="toc-number">4.2.</span> <span class="toc-text">React Code</span></a></li></ol></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="https://i.loli.net/2020/02/27/xwaBoOj158MfNyq.jpg"></div><div class="author-info__name text-center">wenmu</div><div class="author-info__description text-center">记录一些在工作中或学习新知识时学到的一些知识点；正所谓好记性不如一个烂笔头，温故而知新！</div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">115</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">52</span></a><a class="author-info-articles__categories article-meta" href="/categories"><span class="pull-left">分类</span><span class="pull-right">30</span></a></div></div></div><div id="content-outer"><div class="no-bg" id="top-container"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">温木的博客</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"><a class="site-page" href="/">首页</a><a class="site-page" href="/archives">文章</a><a class="site-page" href="/tags">标签</a><a class="site-page" href="/categories">分类</a></span></div><div id="post-info"><div id="post-title">手写react优惠券组件</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-02-28</time><span class="post-meta__separator">|</span><i class="fa fa-inbox post-meta__icon" aria-hidden="true"></i><a class="post-meta__categories" href="/categories/react/">react</a></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h2 id="先看效果图"><a href="#先看效果图" class="headerlink" title="先看效果图"></a>先看效果图</h2><p><img src="https://i.loli.net/2020/02/28/HATeY8R5BGwrh9N.jpg" alt="优惠卷"></p>
<blockquote>
<p>由于是截图，大小有些失真</p>
</blockquote>
<a id="more"></a>

<h2 id="实现分析"><a href="#实现分析" class="headerlink" title="实现分析"></a>实现分析</h2><p>看到这个图，思考一下，就能明白，其实就两个难点：</p>
<blockquote>
<ol>
<li>左边的锯齿状是如何实现</li>
<li>中间的凹陷是如何实现</li>
</ol>
</blockquote>
<p>上述两个难点解决了，相信有 css 基础的都能写出这个组件。</p>
<h2 id="实现锯齿效果"><a href="#实现锯齿效果" class="headerlink" title="实现锯齿效果"></a>实现锯齿效果</h2><h3 id="方法一：伪元素-before-和-after"><a href="#方法一：伪元素-before-和-after" class="headerlink" title="方法一：伪元素 before 和 after"></a>方法一：伪元素 before 和 after</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.sawtooth</span> &#123;</span><br><span class="line">  <span class="comment">/* 相对定位，方便让before和after伪元素绝对定位偏移 */</span></span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">background</span>:<span class="number">#e24141</span>;</span><br><span class="line">  <span class="attribute">width</span>:<span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">height</span>:<span class="number">170px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sawtooth</span><span class="selector-pseudo">:before</span>, <span class="selector-class">.sawtooth</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">' '</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="comment">/* 绝对定位进行偏移 */</span></span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sawtooth</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="comment">/* 圆点型的border */</span></span><br><span class="line">    <span class="attribute">border-right</span>: <span class="number">10px</span> dotted white;</span><br><span class="line">    <span class="comment">/* 偏移一个半径，让圆点的一半覆盖div */</span></span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sawtooth</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="comment">/* 圆点型的border */</span></span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">10px</span> dotted white;</span><br><span class="line">    <span class="comment">/* 偏移一个半径，让圆点的一半覆盖div */</span></span><br><span class="line">    <span class="attribute">right</span>: -<span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;div class="sawtooth"&gt;&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>效果如下：<br><img src="https://i.loli.net/2020/02/28/bHOwqeIPYvtiU9E.jpg" alt="图片描述"></p>
<h3 id="讲解"><a href="#讲解" class="headerlink" title="讲解"></a>讲解</h3><p>这个就是在开头和最后画了一个<code>点状边框</code>，然后平移边框，让边框的一部分覆盖原来的边框，利用圆点的颜色和背景色一样的特点，制作锯齿效果。如果不平移边框效果如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.sawtooth</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="comment">/* 圆点型的border */</span></span><br><span class="line">  <span class="attribute">border-right</span>: <span class="number">10px</span> dotted white;</span><br><span class="line">  <span class="comment">/* 偏移一个半径，让圆点的一半覆盖div */</span></span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sawtooth</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="comment">/* 圆点型的border */</span></span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">10px</span> dotted white;</span><br><span class="line">  <span class="comment">/* 偏移一个半径，让圆点的一半覆盖div */</span></span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://i.loli.net/2020/02/28/cN8ehzMyUBd2w4i.png" alt="图片描述"></p>
<blockquote>
<p>看了上图实现原理是不是一目了然了。但这也有一些缺点： 1.锯齿的颜色必须和背景色一样 2.无法画锯齿朝里的方式 ###方法二 radial-gradient 设置背景<br>###radial-gradient 讲解<br>用径向渐变创建图像。<br>简单语法：<code>radial-gradient(circle, red 10px, blue 20px, yellow 30px);</code><br>形状是圆（也可以是椭圆），开始位置的颜色是 red，中间颜色是 blue，最后颜色是黄色。<br>10px 表示从圆心开始 10px 范围内都是红色；<br>20px 表示距离圆心 20px 的位置为 blue，然后向两边扩散，直到里面 10px 的红色区域，和向外 30px 地方的 yellow 区域；<br>30px 表示从 30px 开始往外都是 yellow。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(circle, red <span class="number">10px</span>, blue <span class="number">20px</span>, yellow <span class="number">30px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="使用-radial-gradient-画圆点背景"><a href="#使用-radial-gradient-画圆点背景" class="headerlink" title="使用 radial-gradient 画圆点背景"></a>使用 radial-gradient 画圆点背景</h3><blockquote>
<ul>
<li>圆心设置成透明</li>
<li>把过度颜色都设置成锯齿的颜色</li>
<li>通过背景尺寸属性设置背景图的颜色，然后 repeate</li>
</ul>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">106px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">140px</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(circle at center, transparent <span class="number">6px</span>, #<span class="number">28</span>acff <span class="number">7px</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">20px</span> <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://i.loli.net/2020/02/28/Gg8pnxIwQVTYme9.png" alt="图片描述"></p>
<p>这样一个带圆点背景的 div 就出来了。然后通过设置宽度，只显示半个圆，左边的锯齿就出来了。width 设置成 10px 如下效果</p>
<p><img src="https://i.loli.net/2020/02/28/zHDwufI4nMtCFX3.png" alt="图片描述"></p>
<h2 id="上边凹槽的实现"><a href="#上边凹槽的实现" class="headerlink" title="上边凹槽的实现"></a>上边凹槽的实现</h2><p>这个实现就比较简单了，通过绝对定位，用一个圆形元素覆盖父元素的边框。 ###问题：子元素无法覆盖父元素<br>在实现时遇到一个问题，就是子元素移动过去了，但是无法覆盖父元素的边框。这时，需要在组件外再套一层 div，这个 div 设置成相对定位，然后把圆 div 设置成相对定义，再移动位置就能覆盖里面的组件 div 了。 ##开发优惠卷<br>通过上述的讲解，需要实现优惠卷所需要的知识点就都讲完了，下面让我们来实现开始效果的优惠卷吧。 ###结构分析</p>
<ol>
<li>一个 div 顶级容器,设置成相对定位。（解决无法覆盖问题）</li>
<li>一个 div 组件容器，放到上面的 div 中</li>
<li>锯齿 div（放到 2 中的的 div）</li>
<li>粗体显示折扣的 div（放到 2 中的的 div）</li>
<li>虚线 div（放到 2 中的的 div）</li>
<li>折扣详情 div（放到 2 中的的 div）</li>
<li>两个圆形 div，放到 1 或 2 中 div 都可以。</li>
</ol>
<h3 id="code"><a href="#code" class="headerlink" title="code"></a>code</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parentContainer</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>:relative;</span><br><span class="line">	<span class="attribute">margin</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">overflow</span>:hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">	<span class="attribute">display</span>:flex;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">	<span class="attribute">border-radius</span>:<span class="number">3px</span>;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">300px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">105px</span>;</span><br><span class="line">	<span class="attribute">border-left</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">106px</span>;</span><br><span class="line">	<span class="attribute">left</span>:-<span class="number">1px</span>;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">0px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">	<span class="attribute">border-radius</span>:<span class="number">3px</span>;</span><br><span class="line">	<span class="attribute">background-image</span>:<span class="built_in">radial-gradient</span>(circle at center,transparent <span class="number">6px</span>,#<span class="number">28</span>ACFF <span class="number">4px</span>);</span><br><span class="line">	<span class="attribute">background-size</span>:<span class="number">20px</span> <span class="number">15px</span>;</span><br><span class="line">	<span class="attribute">z-index</span>:<span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.couponName</span> &#123;</span><br><span class="line">	<span class="attribute">text-align</span>:center;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">0px</span> solid red;</span><br><span class="line">	<span class="attribute">line-height</span>:<span class="number">106px</span>;</span><br><span class="line">	<span class="attribute">font-size</span>:<span class="number">40px</span>;</span><br><span class="line">	<span class="attribute">font-family</span>:PingFangSC-Medium;</span><br><span class="line">	<span class="attribute">font-weight</span>:<span class="number">500</span>;</span><br><span class="line">	<span class="attribute">color</span>:<span class="built_in">rgba</span>(<span class="number">40</span>,<span class="number">172</span>,<span class="number">255</span>,<span class="number">1</span>);</span><br><span class="line">	<span class="attribute">margin-left</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">margin-right</span>:<span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.subName</span> &#123;</span><br><span class="line">	<span class="attribute">font-size</span>:<span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.topSemicircle</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">	<span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">position</span>:absolute;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">80px</span>;</span><br><span class="line">	<span class="attribute">top</span>:-<span class="number">16px</span>;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">background-color</span>:<span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bottomSemicircle</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">height</span>:<span class="number">20px</span>;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">	<span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">position</span>:absolute;</span><br><span class="line">	<span class="attribute">left</span>:<span class="number">80px</span>;</span><br><span class="line">	<span class="attribute">bottom</span>:-<span class="number">16px</span>;</span><br><span class="line">	<span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">	<span class="attribute">background-color</span>:<span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.dashed</span> &#123;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> dashed <span class="number">#ddd</span>;</span><br><span class="line">	<span class="attribute">margin-top</span>:<span class="number">11px</span>;</span><br><span class="line">	<span class="attribute">margin-bottom</span>:<span class="number">11px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">	<span class="attribute">display</span>:flex;</span><br><span class="line">	<span class="attribute">flex-direction</span>:column;</span><br><span class="line">	<span class="attribute">justify-content</span>:center;</span><br><span class="line">	<span class="attribute">align-items</span>:flex-start;</span><br><span class="line">	<span class="attribute">padding-left</span>:<span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.desc</span> &#123;</span><br><span class="line">	<span class="attribute">font-size</span>:<span class="number">10px</span>;</span><br><span class="line">	<span class="attribute">font-family</span>:PingFangSC-Regular;</span><br><span class="line">	<span class="attribute">font-weight</span>:<span class="number">400</span>;</span><br><span class="line">	<span class="attribute">color</span>:<span class="built_in">rgba</span>(<span class="number">170</span>,<span class="number">170</span>,<span class="number">170</span>,<span class="number">1</span>);</span><br><span class="line">	<span class="attribute">margin-top</span>:<span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;div class="parentContainer"&gt;</span><br><span class="line">  &lt;div class="container"&gt;</span><br><span class="line">    &lt;div class="left"&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class="couponName"&gt;8&lt;span class="subName"&gt;折&lt;/span&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class="dashed"&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class="right"&gt;</span><br><span class="line">      &lt;div&gt;折扣卷7.5折&lt;/div&gt;</span><br><span class="line">      &lt;div class="desc"&gt;400张&lt;/div&gt;</span><br><span class="line">      &lt;div class="desc"&gt;有效时间：2018.09.21-2018.10.21&lt;/div&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class="topSemicircle"&gt;&lt;/div&gt;</span><br><span class="line">    &lt;div class="bottomSemicircle"&gt;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>可以把代码赋值到下面的在线工具中看下效果</p>
<p><a href="https://c.runoob.com/front-end/61" target="_blank" rel="noopener">https://c.runoob.com/front-end/61</a></p>
<h3 id="React-Code"><a href="#React-Code" class="headerlink" title="React Code"></a>React Code</h3><blockquote>
<p>根据自己需要再写成 react 版本，就易如反掌了。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br></pre></td><td class="code"><pre><span class="line">//less</span><br><span class="line"><span class="selector-class">.parentContainer</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">312px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">105px</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.left</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">106px</span>;</span><br><span class="line">  <span class="attribute">left</span>: -<span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">radial-gradient</span>(</span><br><span class="line">    circle at center,</span><br><span class="line">    transparent <span class="number">6px</span>,</span><br><span class="line">    #<span class="number">28</span>acff <span class="number">4px</span></span><br><span class="line">  );</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">20px</span> <span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.leftInvalid</span> &#123;</span><br><span class="line">  .left;</span><br><span class="line">  <span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(</span><br><span class="line">    <span class="selector-tag">circle</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>,</span><br><span class="line">    <span class="selector-tag">transparent</span> 6<span class="selector-tag">px</span>,</span><br><span class="line">    <span class="selector-id">#aaaaaa</span> 4<span class="selector-tag">px</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.couponName</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0px</span> solid red;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">106px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: PingFangSC-Medium;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">500</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">172</span>, <span class="number">255</span>, <span class="number">1</span>);</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">62px</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.couponNameInvalid</span> &#123;</span><br><span class="line">  .couponName;</span><br><span class="line">  <span class="selector-tag">color</span>: <span class="selector-id">#aaaaaa</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.title</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">51</span>, <span class="number">51</span>, <span class="number">51</span>, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.invalidTitle</span> &#123;</span><br><span class="line">  .title;</span><br><span class="line">  <span class="selector-tag">color</span>: <span class="selector-tag">rgba</span>(170, 170, 170, 1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.subName</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.semicircle</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">98px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.topSemicircle</span> &#123;</span><br><span class="line">  .semicircle;</span><br><span class="line">  <span class="selector-tag">top</span>: <span class="selector-tag">-16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bottomSemicircle</span> &#123;</span><br><span class="line">  .semicircle;</span><br><span class="line">  <span class="selector-tag">bottom</span>: <span class="selector-tag">-16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.dashed</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="number">#ddd</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">11px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">11px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.desc</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: PingFangSC-Regular;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">170</span>, <span class="number">170</span>, <span class="number">170</span>, <span class="number">1</span>);</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//组件代码</span><br><span class="line">import React, &#123; PureComponent &#125; from 'react'</span><br><span class="line">import styles from './index.less'</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">export</span> <span class="selector-tag">default</span> <span class="selector-tag">class</span> <span class="selector-tag">CouponCard</span> <span class="selector-tag">extends</span> <span class="selector-tag">PureComponent</span> &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="selector-tag">const</span> &#123;</span><br><span class="line">      valid = true,</span><br><span class="line">      data = &#123;</span><br><span class="line">        <span class="selector-tag">id</span>: 2323,</span><br><span class="line">        couponDescription: '折扣卷8.5折',</span><br><span class="line">        validDate: '2018.08.22-2018.09.12',</span><br><span class="line">        <span class="selector-tag">number</span>: 23,</span><br><span class="line">        <span class="selector-tag">amount</span>: 8<span class="selector-class">.5</span>,</span><br><span class="line">        unit: '折',</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125; = this.props</span><br><span class="line">    const amounts = data.amount.toString().split('.')</span><br><span class="line">    <span class="selector-tag">return</span> (</span><br><span class="line">      &lt;div className=&#123;styles.parentContainer&#125;&gt;</span><br><span class="line">        &lt;div className=&#123;styles.container&#125;&gt;</span><br><span class="line">          &lt;div className=&#123;valid ? styles.left : styles.leftInvalid&#125; /&gt;</span><br><span class="line">          &lt;div className=&#123;valid ? styles.couponName : styles.couponNameInvalid&#125;&gt;</span><br><span class="line">            &#123;amounts[0]&#125;</span><br><span class="line">            &lt;span className=&#123;styles.subName&#125;&gt;</span><br><span class="line">              &#123;amounts[1] ? `.$&#123;amounts[1]&#125;` : ''&#125;</span><br><span class="line">              &#123;data.unit&#125;</span><br><span class="line">            &lt;/span&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">          &lt;div className=&#123;styles.dashed&#125; /&gt;</span><br><span class="line">          &lt;div className=&#123;styles.right&#125;&gt;</span><br><span class="line">            &lt;div className=&#123;valid ? styles.title : styles.invalidTitle&#125;&gt;</span><br><span class="line">              折扣卷&#123;data.amount&#125;</span><br><span class="line">              &#123;data.unit&#125;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">            &lt;div className=&#123;styles.desc&#125;&gt;&#123;data.number&#125;张&lt;/div&gt;</span><br><span class="line">            &lt;div className=&#123;styles.desc&#125;&gt;有效时间：&#123;data.validDate&#125;&lt;/div&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">          &lt;div className=&#123;styles.topSemicircle&#125; /&gt;</span><br><span class="line">          &lt;div className=&#123;styles.bottomSemicircle&#125; /&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><a href="https://blog.csdn.net/holmofy/article/details/79648343" target="_blank" rel="noopener">参考链接</a></p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">wenmu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.wangpengpeng.site/2020/02/28/%E6%89%8B%E5%86%99react%E4%BC%98%E6%83%A0%E5%88%B8%E7%BB%84%E4%BB%B6/">http://blog.wangpengpeng.site/2020/02/28/%E6%89%8B%E5%86%99react%E4%BC%98%E6%83%A0%E5%88%B8%E7%BB%84%E4%BB%B6/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.wangpengpeng.site">温木的博客</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/react/">react</a><a class="post-meta__tags" href="/tags/component/">component</a></div><div class="post-qr-code"><div class="post-qr-code-item"><img class="post-qr-code__img" src="https://i.loli.net/2020/02/27/hOBzIxFDJMCrmtN.jpg"><div class="post-qr-code__desc">微信打赏</div></div></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2020/02/28/%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95-JavaScript%E7%89%88/"><i class="fa fa-chevron-left">  </i><span>快速排序算法-JavaScript版</span></a></div><div class="next-post pull-right"><a href="/2020/02/28/%E5%A6%82%E4%BD%95%E8%BF%99%E6%B2%A1%E6%9C%89%E6%98%BE%E7%A4%BA%E5%99%A8%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%E8%8E%B7%E5%8F%96%E6%A0%91%E8%8E%93%E6%B4%BEIP%EF%BC%9F/"><span>如何这没有显示器的情况下获取树莓派IP？</span><i class="fa fa-chevron-right"></i></a></div></nav><div id="vcomment"></div><script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script><script>var notify = 'false' == true ? true : false;
var verify = 'false' == true ? true : false;
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
  return GUEST_INFO.indexOf(item) > -1
});
guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
window.valine = new Valine({
  el:'#vcomment',
  notify:notify,
  verify:verify,
  appId:'U1QqpeQNuBnRsfygHk1GQ30q-gzGzoHsz',
  appKey:'dunDQzEseDzgsKgw4qLQcog1',
  placeholder:'支持markdown！',
  avatar:'wavatar',
  guest_info:guest_info,
  pageSize:'20',
  lang: 'zh-cn'
})</script></div></div><footer><div class="layout" id="footer"><div class="copyright">&copy;2019 - 2020 By wenmu</div><div class="framework-info"><span>驱动 - </span><a href="http://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a href="https://github.com/Molunerfinn/hexo-theme-melody" target="_blank" rel="noopener"><span>Melody</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv">该文访问量<span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.6.1"></script><script src="/js/fancybox.js?version=1.6.1"></script><script src="/js/sidebar.js?version=1.6.1"></script><script src="/js/copy.js?version=1.6.1"></script><script src="/js/fireworks.js?version=1.6.1"></script><script src="/js/transition.js?version=1.6.1"></script><script src="/js/scroll.js?version=1.6.1"></script><script src="/js/head.js?version=1.6.1"></script><script>if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
}</script></body></html>